<template>
  <div >
    <div style="width:100px; display:inline-block">{{item.project_role | projectRoleFilter }}</div>
    <el-form-item
        label=""
        label-width="0px"
        style="width: 150px; display:inline-block"
        :prop="'invoice_cash_items.' + this.id + '.user_id'"
        :rules="{ required: true, message: '请选择人员', trigger: 'blur' }"
        > 
          <el-select class="filter-item" style='width: 150px;'
            v-model="user_id"
            filterable
            placeholder="请选择">
            <el-option
              v-for="item in userOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
    </el-form-item>
    <el-form-item
      label=""
      label-width="0px"
      style="width: 110px; display:inline-block"
      :prop="'invoice_cash_items.' + this.id + '.cash_proportion'"
      :rules="{ validator: validatorProportionNum, trigger: 'blur' }"
      >
        <el-input size="small" v-model="cash_proportion" style="width: 110px;">
          <template slot="append"><span>%</span></template>
        </el-input>
    </el-form-item>
    <el-form-item
        label=""
        label-width="0px"
        style="width: 170px; display:inline-block"
        :prop="'invoice_cash_items.' + this.id + '.cash_amount'"
        :rules="{  validator: validatorNum, trigger: 'blur' }"
        >
          <el-input size="small" v-model="cash_amount" style="width: 170px;">
            <template slot="append"><span>RMB</span></template>
          </el-input>
    </el-form-item>

  </div>
</template>

<script>
import waves from '@/directive/waves' // 水波纹指令

export default {
  name: 'cashItem',
  props: {
    id: {
      type: Number,
      default: 0
    },
    item: {
      type: Object,
      default: {} // 这样可以指定默认的值
    },
    userOptions: {
      type: Array,
      default: []
    },
    invoice_amount: {
      type: String,
      default: '0'
    }
  },
  directives: {
    waves
  },
  data() {
    return {
      user_id: '',
      cash_proportion: '',
      cash_amount: ''
    }
  },
  filters: {
  },
  created() {
    if (this.item.user_id) {
      this.user_id = this.item.user_id
    }
    if (this.item.cash_proportion) {
      this.cash_proportion = this.item.cash_proportion
    }
    if (this.item.cash_amount) {
      this.cash_amount = parseFloat(Number(this.invoice_amount) * Number(this.item.cash_proportion) / 100).toFixed(2)
    }
  },
  watch: {
    item: {
      handler: function(val, oldVal) {
        if (val.user_id) {
          this.user_id = val.user_id
        }
        if (val.cash_proportion) {
          this.cash_proportion = val.cash_proportion
        }
        if (val.cash_amount) {
          this.cash_amount = val.cash_amount
        }
      },
      deep: true
    },
    user_id: function(val, oldval) {
      this.$emit('setCashItem',
        {
          id: this.id,
          data: {
            project_role: this.item.project_role,
            user_id: val,
            cash_proportion: this.cash_proportion,
            cash_amount: this.cash_amount
          }
        })
    },
    cash_proportion: function(val, oldval) {
      this.cash_amount = parseFloat(Number(this.invoice_amount) * Number(val) / 100).toFixed(2)
      this.$emit('setCashItem',
        {
          id: this.id,
          data: {
            project_role: this.item.project_role,
            user_id: this.user_id,
            cash_proportion: val,
            cash_amount: this.cash_amount
          }
        })
    },
    invoice_amount: function(val, oldval) {
      this.cash_amount = parseFloat(Number(val) * Number(this.cash_proportion) / 100).toFixed(2)
    },
    cash_amount: function(val, oldval) {
      this.$emit('setCashItem',
        {
          id: this.id,
          data: {
            project_role: this.item.project_role,
            user_id: this.user_id,
            cash_proportion: this.cash_proportion,
            cash_amount: val
          }
        })
    }

  },
  methods: {
    validatorNum(rule, value, callback) {
      const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
      if (reg.test(value) === false) {
        callback(new Error('只能输入数字,保留两位小数'))
      } else {
        callback()
      }
    },
    validatorProportionNum(rule, value, callback) {
      const reg = /^(?!00)(?:[0-9]{1,2}|100)$/
      if (reg.test(value) === false) {
        callback(new Error('请输入0-100的整数'))
      } else {
        callback()
      }
    }
  }
}
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>